<template>
  <div class="app-container">
    <!-- 上部分表单 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="60px"
      label-position="left"
    >
      <div class="button-from">
        <!-- <el-form-item label="油企" prop="orderNo">
          <el-input v-model="queryParams.orderNo" placeholder="请输入油企名称" clearable @keyup.enter.native="handleQuery"
            style="width: 200px" size="small" />
        </el-form-item> -->
        <el-form-item
          label="油企名称"
          prop="enterpriseId"
          size="small"
          v-if="authUser"
          style="padding-top: 4px"
        >
          <el-select
            v-model="queryParams.enterpriseId"
            :clearable="true"
            filterable
            placeholder="请选择油企"
            style="width: 250px"
            @change="handleSelectChange"
          >
            <el-option
              v-for="(item, index) in enterpriseList"
              :key="index"
              :value="item.enterpriseId"
              :label="item.enterpriseName"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="油站" prop="likeConsumer">
          <el-input v-model="queryParams.likeConsumer" placeholder="请输入油站名称" clearable @keyup.enter.native="handleQuery"
            style="width: 200px" size="small" />
        </el-form-item> -->
        <el-form-item
          label="油站"
          prop="stationId"
          clearable
          size="small"
          style="padding-top: 4px"
        >
          <el-select
            v-model="queryParams.stationId"
            :clearable="true"
            filterable
            placeholder="请选择油站"
            style="width: 250px"
          >
            <el-option
              v-for="item in stationList"
              :key="item.stationId"
              :label="item.stationName"
              :value="item.stationId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="班结时间" prop="createdDate">
          <el-date-picker
            size="small"
            style="width: 350px"
            v-model="dateRangeCreatedDate"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
          <div class="button-style1">
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleQuery"
              size="small"
              >搜索</el-button
            >
          </div>
          <!-- <div class="button-style1">
            <el-button type="primary" icon="el-icon-search" @click="handleExport" size="small">导出</el-button>
          </div> -->
        </el-form-item>
        <!-- <el-form-item label="" prop="oilGun">
          <el-input
            v-model="queryParams.oilGun"
            style="width: 250px"
            size="small"
            placeholder="请输入油枪"
            clearable
            @keyup.enter.native="handleQuery"
          />
        
        </el-form-item>-->
      </div>
    </el-form>
    <div style="text-align: right; margin: 10px 0">
      <el-button
        v-show="delIds.length"
        icon="el-icon-delete"
        @click="handleDeleteAll"
        size="small"
        >删除</el-button
      >
      <el-button icon="el-icon-download" @click="handleExport" size="small"
        >导出</el-button
      >
    </div>
    <!-- 表格 -->
    <div class="card-table">
      <!--
      <el-button icon="el-icon-message" size="small" type="success">新增</el-button>
      <el-button icon="el-icon-message" size="small">导出</el-button>
      <el-button icon="el-icon-message" size="small">打印</el-button>
      -->
      <el-table
        border
        style="width: 100%"
        :data="orderList"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <af-table-column label="班次" align="left" prop="classNo" />
        <af-table-column label="油站名称" align="left" prop="stationName" />
        <af-table-column label="开始时间" align="left" prop="classStartTime" />
        <af-table-column label="结束时间" align="left" prop="classEndTime" />
        <af-table-column label="实收金额(元)" align="left" prop="amt" />

        <af-table-column
          label="应收总金额（元）"
          align="left"
          prop="receivableAmt"
        />
        <af-table-column
          label="优惠总金额（元）"
          align="left"
          prop="discountCouponAmt"
        />
        <af-table-column
          label="充值实收合计金额（元）"
          align="left"
          prop="actualRechargeReceivedAmt"
        />
        <af-table-column
          label="提现总金额（元）"
          align="left"
          prop="totalWithdrawalAmount"
        >
          <template slot-scope="scope">
            <span
              v-html="mathNumber('further', scope.row.totalWithdrawalAmount)"
            ></span>
          </template>
        </af-table-column>
        <af-table-column
          label="手续费（元）"
          align="left"
          prop="commission"
          v-if="authUser"
        >
          <template slot-scope="scope">
            <span v-html="mathNumber('dropTail', scope.row.commission)"></span>
          </template>
        </af-table-column>
        <!-- <af-table-column
          label="现金总金额（元）"
          align="left"
          prop="totalCashAmount"
        /> -->
        <!-- <af-table-column label="消耗积分（个）" align="left" prop="score" /> -->

        <af-table-column label="退款（元）" align="left" prop="refundAmt" />
        <af-table-column label="订单数" align="left" prop="orderCount" />

        <!-- <af-table-column label="长短款" align="left" prop="moreAmt" /> -->
        <!--
      <af-table-column label="财务验款差异" align="left" prop="oilGun" />
      -->
        <af-table-column label="班结时间" align="left" prop="createTime" />
        <af-table-column label="班结人" align="left" prop="createName" />
        <af-table-column label="设备编码" align="left" prop="equipment_code" />
        <af-table-column
          width="200"
          label="备注"
          align="left"
          prop="note"
          :show-overflow-tooltip="true"
        />

        <af-table-column
          fixed="right"
          label="操作"
          align="left"
          class-name="small-padding fixed-width"
          width="200px"
        >
          <!--fixed="right"-->
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              disable
              @click="
                goNewPage('/overview/Overview_WorkSummaryRecord_See', scope.row)
              "
              >查看明细</el-button
            >
            <el-button
              size="mini"
              type="text"
              icon="el-icon-plus"
              v-if="reprint"
              @click="printOrderInfo(scope.row)"
              >补打小票</el-button
            >
            <!-- <el-button size="mini" type="text" disabled
              @click="goNewPage('/overview/Overview_WorkSummaryRecord_WorkOut', scope.row)">交班报表</el-button> -->
            <!--
            <el-button
              size="mini"
              type="text"
              
              
              >消费记录</el-button
            >
            @click="goNewPage('',scope.row)"
            -->
            <!-- <el-button size="mini" type="text" disabled
              @click="goNewPage('/overview/Overview_WorkSummaryRecord_Gun', scope.row)">油枪统计</el-button>
            <el-button size="mini" type="text" disabled
              @click="goNewPage('/overview/Overview_WorkSummaryRecord_Tank', scope.row)">回灌明细</el-button> -->
          </template>
        </af-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import {
  listOrder,
  exportOrder,
  printOrderInfo,
  classSettlementDelete,
} from "@/api/station/order";
import { enterpriseList } from "@/api/station/orderHistory";
import { listEnterpriseStation } from "@/api/dept";
import { stationinfo } from "@/api/station/gun";
import { listPrice, getPrice } from "@/api/station/price";
import { listManage, feieList } from "@/api/station/manage";
import { getSettlement, exportClass, exportClassSe } from "@/api/settlement";

export default {
  name: "Order_Oil",
  data() {
    return {
      //创建订单时间间隔
      dateRangeCreatedDate: [],
      // 总条数
      total: 0,
      // 订单支付表格数据
      orderList: [],
      oilNameOptions: [],
      // 字典
      payTypeOptions: [],
      // 下拉油站
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        stationId: null,
      },
      // 表单校验
      rules: {},
      reprint: false,
      delIds: [],
      enterpriseList: [],
      stationList: [],
    };
  },
  created() {
    this.getList();
    this.getFeiE();
    this.getEnterpriseList();
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    mathNumber(key, val) {
      if (key === "further") {
        if (val) {
          var roundedValue = val.toFixed(2);
          var calculatedValue = parseFloat(roundedValue);
          return calculatedValue;
        }
        return 0;
      } else if (key === "dropTail") {
        if (val) {
          const roundedNumber = Math.ceil(val * 100) / 100;
          const formattedNumber = roundedNumber.toFixed(2);
          return formattedNumber;
        }
        return 0;
      }
    },
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 查询油企
    getEnterpriseList() {
      enterpriseList().then((res) => {
        this.enterpriseList = res.rows;
      });
    },
    // 查询油站
    getStationList(val) {
      listEnterpriseStation({ enterpriseId: val }).then((res) => {
        this.stationList = res;
      });
    },
    // 勾选表格
    handleSelectionChange(selection) {
      this.delIds = selection.map((item) => {
        return item.classNo;
      });
    },
    isAdmin() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
    // 批量删除
    handleDeleteAll() {
      if (this.isAdmin()) {
        this.$message.error("管理员无法删除！！！");
      } else {
        this.$confirm(`确认删除勾选的班结记录吗？`).then(() => {
          classSettlementDelete(this.delIds).then((res) => {
            if (res && res.code === 200) {
              this.$message.success(res.msg);
              this.delIds = [];
              this.getList();
            } else {
              this.$message.error(res.msg);
            }
          });
        });
      }
    },

    goNewPage(url, row) {
      this.$router.push({
        path: url,
        query: { classNo: row.classNo },
      });
    },
    payTypeFotmat(row, column) {
      if (row.payType === "wx") {
        return "微信支付";
      } else if (row.payType === "zfb") {
        return "支付宝";
      } else if (row.payType === "xj") {
        return "现金支付";
      } else if (row.payType === "dzk") {
        return "电子卡支付";
      } else if (row.payType === "POS") {
        return "POS机支付";
      } else if (row.payType === "yzf") {
        return "预支付";
      } else if (row.payType === "kbzf") {
        return "卡包支付";
      }
    },
    statusFotmat(row, column) {
      if (row.status === "0") {
        return "未支付";
      } else if (row.status === "1") {
        return "已支付";
      } else if (row.status === "2") {
        return "线下退款";
      } else if (row.status === "3") {
        return "线上退款";
      }
    },

    getFeiE() {
      feieList({}).then((response) => {
        const equipmentList = response.rows;
        if (!!equipmentList) {
          if ((equipmentList[0] || {}).deviceType == "3") {
            this.reprint = true;
          }
        }
      });
    },
    getList() {
      this.queryParams.beginTime = this.dateRangeCreatedDate[0];
      this.queryParams.endTime = this.dateRangeCreatedDate[1];
      getSettlement(this.queryParams).then((response) => {
        this.orderList = response.rows;
        this.total = response.total;
        console.log("orderList", this.orderList);
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreatedDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //打印订单小票
    printOrderInfo(row) {
      console.log(row);
      exportClassSe({
        classNo: row.classNo,
        stationId: row.stationId,
        classStartTime: row.classStartTime,
        classEndTime: row.classEndTime,
      }).then((response) => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm("是否确认导出所有订单支付数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportClass(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  margin-top: -15px;
}

.button-from {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .button-style1 {
    display: inline-block;
    width: 80px;

    .el-button {
      margin: 0 0 0 15px;
    }
  }
}

::v-deep .card-table {
  padding: 10px;
  // margin-top: 10px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
::v-deep .el-form-item {
  margin-bottom: 0;

  .el-form-item__label {
    padding: 0;
    margin: 0;
    height: 29px;
    font-weight: 400;
    font-size: 12px;
  }

  .el-button--cyan {
    margin-left: 20px;
  }
}

::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}
</style>
